<style>
    .ContributionCalendar-day[data-level="1"] {
        fill: var(--color-calendar-graph-day-L1-bg) !important;
    }
    .ContributionCalendar-day[data-level="2"] {
        fill: var(--color-calendar-graph-day-L2-bg) !important;
    }
    .ContributionCalendar-day[data-level="3"] {
        fill: var(--color-calendar-graph-day-L3-bg) !important;
    }
    .ContributionCalendar-day[data-level="4"] {
        fill: var(--color-calendar-graph-day-L4-bg) !important;
    }

    .ContributionCalendar-day {
        --color-calendar-graph-day-L1-bg: #9be9a8;
        --color-calendar-graph-day-L2-bg: #40c463;
        --color-calendar-graph-day-L3-bg: #30a14e;
        --color-calendar-graph-day-L4-bg: #216e39;
        fill: #ebedf0;
        outline: 1px rgba(27, 31, 35, 0.06) solid;
        outline-offset: -1px;
    }

    .ContributionCalendar-label {
        font-size: 9px;
    }
</style>
<svg width="828" height="128">
    <g transform="translate(10, 20)">
        {% set x = 16 %} {% for items in calendar %}
        <g transform="translate({{ loop.index0 * 16 }}, 0)">
            {% for row in items %}
            <rect width="11" height="11" x="{{ x }}" y="{{ loop.index0 * 15 }}" class="ContributionCalendar-day" rx="2"
                ry="2" data-count="{{ row.count }}" data-date="{{ row.date }}" data-level="{{ row.level }}"></rect>
            {% endfor %} {% set x = x - 1 %}
        </g>
        {% endfor %}
        <text x="16" y="-8" class="ContributionCalendar-label">Dec</text>
        <text x="76" y="-8" class="ContributionCalendar-label">Jan</text>
        <text x="151" y="-8" class="ContributionCalendar-label">Feb</text>
        <text x="211" y="-8" class="ContributionCalendar-label">Mar</text>
        <text x="271" y="-8" class="ContributionCalendar-label">Apr</text>
        <text x="331" y="-8" class="ContributionCalendar-label">May</text>
        <text x="406" y="-8" class="ContributionCalendar-label">Jun</text>
        <text x="466" y="-8" class="ContributionCalendar-label">Jul</text>
        <text x="526" y="-8" class="ContributionCalendar-label">Aug</text>
        <text x="601" y="-8" class="ContributionCalendar-label">Sep</text>
        <text x="661" y="-8" class="ContributionCalendar-label">Oct</text>
        <text x="736" y="-8" class="ContributionCalendar-label">Nov</text>
        <text text-anchor="start" class="ContributionCalendar-label" dx="-10" dy="8" style="display: none">
            Sun
        </text>
        <text text-anchor="start" class="ContributionCalendar-label" dx="-10" dy="25">
            Mon
        </text>
        <text text-anchor="start" class="ContributionCalendar-label" dx="-10" dy="32" style="display: none">
            Tue
        </text>
        <text text-anchor="start" class="ContributionCalendar-label" dx="-10" dy="56">
            Wed
        </text>
        <text text-anchor="start" class="ContributionCalendar-label" dx="-10" dy="57" style="display: none">
            Thu
        </text>
        <text text-anchor="start" class="ContributionCalendar-label" dx="-10" dy="85">
            Fri
        </text>
        <text text-anchor="start" class="ContributionCalendar-label" dx="-10" dy="81" style="display: none">
            Sat
        </text>
    </g>
</svg>
<div class="width-full clearfix">
    <div class="float-right color-fg-muted">
        Less
        <svg width="10" height="10" class="d-inline-block">
            <rect width="10" height="10" class="ContributionCalendar-day" rx="2" ry="2" data-level="0"></rect>
        </svg>
        <svg width="10" height="10" class="d-inline-block">
            <rect width="10" height="10" data-level="1" class="ContributionCalendar-day" rx="2" ry="2" data-level="0"></rect>
        </svg>
        <svg width="10" height="10" class="d-inline-block">
            <rect width="10" height="10" data-level="2" class="ContributionCalendar-day" rx="2" ry="2" data-level="0"></rect>
        </svg>
        <svg width="10" height="10" class="d-inline-block">
            <rect width="10" height="10" data-level="3"  class="ContributionCalendar-day" rx="2" ry="2" data-level="0"></rect>
        </svg>
        <svg width="10" height="10" class="d-inline-block">
            <rect width="10" height="10" data-level="4" class="ContributionCalendar-day" rx="2" ry="2" data-level="0"></rect>
        </svg>
        More
    </div>
</div>